<template>
  <el-container>
    <el-main style="min-height:100vh;padding:0;background-color: #000a3b">
      <el-row type="flex" justify="center" class="top1" :style="{backgroundImage: 'url(' + top + ')' }">
        <el-col :span="24" class="top1">
          <h1 style="color:#214CB1">第26届全国广播电视技术能手网络安全专业竞赛</h1>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" class="top2">
        <el-col class="top2" :span="6" style="">
          <el-card style="background-color: #000a3b;color: #02d9fd;border: none;justify-content: center">
            <span>参赛学员</span>
            <h1 style="display:flex;margin-top: 10px;color: white;justify-content: center">{{ userNum }}</h1>
          </el-card>
        </el-col>
        <el-col class="top2" :span="6">
          <el-card style="background-color: #000a3b;color: #02d9fd;border: none;justify-content: center">
            <span>已开通环境</span>
            <h1 style="display:flex;margin-top: 10px;color: white;justify-content: center">{{ vpsOpenNum }}</h1>
          </el-card>
        </el-col>
        <el-col class="top2" :span="6">
          <el-card style="background-color: #000a3b;color: #02d9fd;border: none;justify-content: center">
            <span>题目数量</span>
            <h1 style="display:flex;margin-top: 10px;color: white;justify-content: center">{{ taskNum }}</h1>
          </el-card>
        </el-col>
        <el-col class="top2" :span="6">
          <el-card style="background-color: #000a3b;color: #02d9fd;border: none;justify-content: center">
            <span>总答题数量</span>
            <h1 style="display:flex;margin-top: 10px;color: white;justify-content: center">{{ answerNum }}</h1>
          </el-card>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" class="top2">
        <el-col :span="10">
          <el-card style="background-color: #000a3b;color: #02d9fd;justify-content: center;height:600px">
            <h1 style="display:flex;justify-content: center">完成度</h1>
            <el-table
                :data="answerInfo"
                height="530">
              <el-table-column
                  fixed
                  prop="rank"
                  width="50"
                  label="排名">
                <template slot-scope="scope">
                  <p>{{ scope.$index + 1 }}</p>
                </template>
              </el-table-column>
              <el-table-column
                  fixed
                  prop="user"
                  width="200"
                  label="用户">
              </el-table-column>
              <el-table-column
                  fixed
                  prop="num"
                  width="100"
                  label="得分">
              </el-table-column>
              <el-table-column
                  fixed
                  label="答题完成情况">
                <template slot-scope="scope">
                  <div v-if="answerInfo[scope.$index].num === 10">
                    <img src="../assets/image1.png" class="title" alt="">
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 20">
                    <div style="display: flex">
                      <div v-for="item in 2" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 30">
                    <div style="display: flex">
                      <div v-for="item in 3" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 40">
                    <div style="display: flex">
                      <div v-for="item in 4" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 50">
                    <div style="display: flex">
                      <div v-for="item in 5" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 60">
                    <div style="display: flex">
                      <div v-for="item in 6" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 70">
                    <div style="display: flex">
                      <div v-for="item in 7" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 80">
                    <div style="display: flex">
                      <div v-for="item in 8" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 90">
                    <div style="display: flex">
                      <div v-for="item in 9" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 100">
                    <div style="display: flex">
                      <div v-for="item in 10" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 110">
                    <div style="display: flex">
                      <div v-for="item in 11" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 120">
                    <div style="display: flex">
                      <div v-for="item in 12" :key="item" style="display: flex">
                        <img src="../assets/image1.png" class="title" alt="">
                      </div>
                    </div>
                  </div>
                  <div v-if="answerInfo[scope.$index].num === 0">
                    <h3>空</h3>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card
              style="background-color: #000a3b;color: #02d9fd;justify-content: center;height:600px;margin-left:30px">
            <h1 style="display:flex;justify-content: center">实时监控</h1>
            <el-table
                :data="timeInfo"
                height="530">
              <el-table-column
                  fixed
                  prop="time"
                  label="提交时间">
              </el-table-column>
              <el-table-column
                  fixed
                  prop="user"
                  label="用户">
              </el-table-column>
              <el-table-column
                  fixed
                  prop="taskTitle"
                  label="题目">
              </el-table-column>
              <el-table-column
                  fixed
                  prop="answer"
                  label="是否正确">
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import Top from '@/assets/top1.png'

export default {
  name: "Monitor",
  data() {
    return {
      timer: '',
      value: 0,
      top: Top,
      userNum: '',
      vpsOpenNum: '',
      taskNum: '',
      answerNum: '',
      timeInfo: [],
      answerInfo: [],
    }
  },
  mounted() {

    this.$axios2.post('/auth').then((res) => {
      let code = res.data.code
      if (code !== 2) {
        this.$router.push('/task')
      }
    })
    // 获取后端数据
    setInterval(this.zero, 3000);


    setInterval(this.zeroGet, 3000);
    // this.$axios2.post('/datav').then((res) => {
    //   let con = res.data.userInfo
    //   if (this.answerInfo.length !== con.length){
    //     this.answerInfo = []
    //     for (let i = 0;i < con.length;i++){
    //       let list = {}
    //       list.user = con[i].AdminName
    //       list.num = con[i].Fraction
    //       this.answerInfo.push(list)
    //       console.log(this.answerInfo)
    //     }
    //   }
    // })


  },
  methods: {
    zero() {
      function formatDate(date) {
        let d = new Date(date);
        let Minutes;
        let Seconds;
        let Hours;
        Hours = d.getHours();
        Minutes = d.getMinutes();
        Seconds = d.getSeconds();
        // if (Hours.toString().length < 2) Hours = "0" + Hours;
        if (Minutes.toString().length < 2) Minutes = "0" + Minutes;
        if (Seconds.toString().length < 2) Seconds = "0" + Seconds;
        return Hours + "时" + Minutes + "分" + Seconds + "秒"
      }

      this.$axios2.post('/monitorinfo').then((res) => {
        let data = res.data
        let answerInfo = data.answerInfo
        this.userNum = data.userNum
        this.vpsOpenNum = data.vpsOpenNum
        this.taskNum = data.taskNum
        this.answerNum = data.answerNum
        if (this.timeInfo.length !== answerInfo.length) {
          this.timeInfo = []
          for (let i = 0; i < answerInfo.length; i++) {
            let list = {}
            list.user = answerInfo[i].UserName
            let date = answerInfo[i].CreatedAt
            list.time = formatDate(date)
            list.taskTitle = answerInfo[i].title
            if (answerInfo[i].Answer !== true) {
              list.answer = "错误"
            } else {
              list.answer = "正确"
            }
            this.timeInfo.push(list)
          }
        }
      })
    },
    zeroGet() {
      this.$axios2.post('/datav').then((res) => {
        let con = res.data.userInfo
        this.answerInfo = []
        for (let i = 0; i < con.length; i++) {
          let list = {}
          list.user = con[i].AdminName
          list.num = con[i].Fraction
          this.answerInfo.push(list)
        }
      })
    }
  },
}
</script>

<style scoped>
.top1 {
  display: flex;
  justify-content: center;
  height: 85px;
  line-height: 70px;
  color: #02d9fd;
  background-size: 100% 100%;
}

.top2 {
  display: flex;
  justify-content: center;
  height: 170px;
  color: #02d9fd;
  margin-top: 10px;
}

/deep/ .el-table, .el-table__expanded-cell {
  background-color: #000A3B;
}

/deep/ .el-table td, .el-table th.is-leaf {
  border-bottom: 1px solid #00e7ff;
}

/deep/ .el-table td {
  border-bottom: 1px solid #00e7ff;
}

/deep/ .el-table th.is-leaf {
  border-bottom: 1px solid #00e7ff;
}


/deep/ .el-table th {
  background-color: #000A3B;
}

/deep/ .el-table tr {
  background-color: #000A3B;
}

/deep/ .el-table tbody tr {
  pointer-events: none;
}

/deep/ .el-table {
  color: white;
}

/deep/ .el-table thead {
  color: white;
}

</style>